<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
<%
	String basePath = request.getContextPath() + "/";
	String tab = request.getParameter("tab"); 
	if(tab == null){
		tab = "tab1";
	}
	String menu = request.getParameter("menu"); 
	if(menu == null){
		menu = "m1_1";
	}
%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><decorator:title /></title>

<link rel="stylesheet" type="text/css" href="<%= basePath%>css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="<%= basePath%>css/bootstrap-theme.min.css" />
<link rel="stylesheet" type="text/css" href="<%= basePath%>css/bootstrap-datetimepicker.min.css" />
<link rel="stylesheet" type="text/css" href="<%= basePath%>css/fileinput.min.css" />

<style type="text/css">
    .table th, .table td {
        text-align: center;
    }
</style>

<script type="text/javascript" src="<%= basePath%>js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="<%= basePath%>js/bootstrap.min.js"></script>
<script type="text/javascript" src="<%= basePath%>js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="<%= basePath%>js/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript" src="<%= basePath%>js/json.js"></script>
<script type="text/javascript" src="<%= basePath%>js/diff_match_patch.js"></script>
<script type="text/javascript" src="<%= basePath%>js/fileinput.min.js"></script>

<script type="text/javascript">
	function post(config){
		var servlet = config.servlet;
		var operate = config.operate;
		
		var params = {};
		params.operate = operate;
		
		var keyword = ['servlet','operate','succ','fail','msg'];
		for(var key in config){
		    if(keyword.indexOf(key) < 0){
				params[key] = config[key];
			}
		}
		
		$.post(path(servlet), params, function(data){
			if('msg' in config){
				config.msg(data);
			}else {
				if(data.success == "true"){
					if('succ' in config){
						config.succ();
					}
				}else{
					if('fail' in config){
						config.fail();
					}
				}
			}
		}, "json");
	}
	
	function path(uri){
		return "<%= request.getContextPath() %>" + "/" + uri;
	}
</script>
<decorator:head />
</head>
<body style="padding-top: 70px;">
  <div class="container-fluid">
	<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
	  <div class="navbar-header">
	  	<span class="icon-bar"><img class="img-circle" alt="LOGO" src="<%= basePath %>img/logo.gif"></span>
	  </div>
	
	  <!-- Collect the nav links, forms, and other content for toggling -->
	  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
	    <form class="navbar-form navbar-left" role="search">
	      <div class="form-group">
	        <input type="text" class="form-control" placeholder="用户ID">
	      </div>
	      <button type="submit" class="btn btn-default">设置用户</button>
	    </form>
	    <ul class="nav navbar-nav">
	      <li id="tab1"><a href="<%= basePath %>page/demo/demo.jsp?tab=tab1&menu=m1_1">用户</a></li>
	      <li id="tab2"><a href="<%= basePath %>page/demo/demo.jsp?tab=tab2&menu=m2_1">战斗</a></li>
	      <li id="tab3"><a href="<%= basePath %>page/demo/demo.jsp?tab=tab3&menu=m3_1">活动</a></li>
	      <li id="tab4"><a href="<%= basePath %>page/demo/demo.jsp?tab=tab4&menu=m4_1">交易</a></li>
	      <li id="tab5"><a href="<%= basePath %>page/demo/demo.jsp?tab=tab5&menu=m5_1">工具</a></li>
	      <li id="tab6"><a href="<%= basePath %>page/demo/demo.jsp?tab=tab6&menu=m6_1">客服工具6</a></li>
	      <li id="tab7"><a href="<%= basePath %>page/demo/demo.jsp?tab=tab7&menu=m7_1">客服工具7</a></li>
	    </ul>
	    <ul class="nav navbar-nav navbar-right">
	      <li><a href="#">退出</a></li>
	    </ul>
	  </div><!-- /.navbar-collapse -->
	</nav>
	
	<div class="row-fluid">
	  <div class="col-md-2">
		<ul class="nav nav-pills nav-stacked">
		<%if(tab.equals("tab1")) {%>
		  <li id="m1_1"><a href="#">用户基本信息</a></li>
		  <li id="m1_2"><a href="#">Profile</a></li>
		  <li id="m1_3"><a href="#">Messages</a></li>
		  <li id="m1_4"><a href="#">活动</a></li>
		  <li id="m1_4"><a href="#">活动</a></li>
		  <li id="m1_4"><a href="#">活动</a></li>
		  <li id="m1_4"><a href="#">活动</a></li>
		  <li id="m1_4"><a href="#">活动</a></li>
		  <li id="m1_4"><a href="#">活动</a></li>
		  <li id="m1_4"><a href="#">活动</a></li>
		  <li id="m1_4"><a href="#">活动</a></li>
		  <li id="m1_4"><a href="#">活动</a></li>
		  <li id="m1_4"><a href="#">活动</a></li>
		  <li id="m1_4"><a href="#">活动</a></li>
		  <li id="m1_4"><a href="#">活动</a></li>
		  <li id="m1_4"><a href="#">活动</a></li>
		  <li id="m1_4"><a href="#">活动</a></li>
		  <li id="m1_4"><a href="#">活动</a></li>
		  <li id="m1_4"><a href="#">活动</a></li>
		  <li id="m1_4"><a href="#">活动</a></li>
		<%} else if(tab.equals("tab2")){%>
		  <li id="m2_1"><a href="#">demo2</a></li>
		<%} else if(tab.equals("tab3")){%>
		  <li id="m3_1"><a href="#">demo3</a></li>
		<%} else if(tab.equals("tab4")){%>
		  <li id="m4_1"><a href="#">demo4</a></li>
		<%} else if(tab.equals("tab5")){%>
		  <li id="m5_1"><a href="#">demo5</a></li>
		<%} else if(tab.equals("tab6")){%>
		  <li id="m6_1"><a href="#">demo6</a></li>
		<%} else if(tab.equals("tab7")){%>
		  <li id="m7_1"><a href="#">demo7</a></li>
		<%} %>
		</ul>
	  </div>
	  <div class="col-md-10">
	  	 <decorator:body />
	  </div>
	</div>
  </div>
  
<script type="text/javascript">
  $(document).ready(function(){
	  $("#<%= tab %>").addClass("active");
	  $("#<%= menu %>").addClass("active");
	  
  });
</script>
</body>
</html>